<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 2px double #ff1c06;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="600" height="500"></canvas>
<script>
    // 前端坐标系： W3C坐标系（y正轴在下）
    // canvas：为像素图（位图）
    // get id: 减少重复代码量
    function $$(id) {
        return document.getElementById(id);
    }
    // 创建canvas对象
    var canvas = $$("canvas");
    // 只能标签内部设置才能使属性获取正确
    // css可以设置高宽并显示，但是canvas对象不能获得css设置的实际的值，而是返回默认的值（300，150）
    console.log(canvas, canvas.width, canvas.height);
    // 创建上下文环境对象
    var context = canvas.getContext("2d");
    // 绘制直线/ 三角形/ 多边形
    // moveTo()将笔移至起点
    context.moveTo(100, 100);
    // lineTo()创建从起点到此方法指定的位置的路径
    context.lineTo(300, 100);
    // 可以连续多次使用此方法，当多次使用时，则笔的起点位置移到该方法位置
    // 下式起点位置为（300，100）
    context.lineTo(100, 50);
    // 下式起点位置为（100，300）
    context.lineTo(500, 100);
    // 绘制矩形
    context.moveTo(100, 120);
    context.lineTo(120,120);
    context.lineTo(120, 140);
    context.lineTo(100, 140);
    context.lineTo(100, 120);
    // 绘制路径（显示线条）
    context.stroke();
</script>
</body>
</html>